<template>
  <el-row class="h100">
    <el-col class="h100" :span="12">
      <div class="h100" ref="echartsMapRef"></div>
    </el-col>
    <el-col class="h100" :span="12">
      <div class="title">统计分析结果</div>
      <div class="layout-padding-auto">
        <el-table :data="state.tableData.data" v-loading="state.tableData.loading" border>
          <el-table-column prop="roleName" label="行政区" show-overflow-tooltip></el-table-column>
          <el-table-column prop="roleSign" label="2014" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sort" label="2015" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="2016" show-overflow-tooltip></el-table-column>
          <el-table-column prop="describe" label="2017" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="2018" show-overflow-tooltip></el-table-column>
          <el-table-column prop="geshi" label="2019" show-overflow-tooltip width="120px"></el-table-column>
          <el-table-column prop="leixing" label="2020" show-overflow-tooltip></el-table-column>
          <el-table-column prop="fanwei" label="2021" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, reactive } from 'vue';

const echartsMapRef = ref();

const state = reactive({
  tableData: {
    data: [],
    loading: false,
  },
});

const initChart = () => {
  const XData = [
    '大兴安岭地区',
    '哈尔滨市',
    '鹤岗市',
    '佳木斯市',
    '牡丹江市',
    '七台河市',
    '齐齐哈尔市',
    '双鸭山市',
    '绥化市',
  ];
  const chart = echarts.init(echartsMapRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 20,
      right: 20,
      bottom: 0,
      containLabel: true,
    },
    legend: {},
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: XData,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '2021',
        barMaxWidth: 10,
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
      {
        name: '2022',
        barMaxWidth: 10,
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
      {
        name: '2023',
        barMaxWidth: 10,
        data: [120, 200, 150, 80, 70, 110, 130, 200, 150],
        type: 'bar',
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  color: var(--el-text-color-primary);
  font-size: var(--el-font-size-large);
  font-weight: bold;
}
</style>
